<template>
	<view>
		<button @click="ModlueData">测试</button>
		<button @click="downloadAsMarkdown">下载为Markdown</button>
	</view>

	<view class="container">
		<!-- 使用 scroll-view 包裹 rich-text -->
		<scroll-view class="fixed-rich-text" :scroll-y="true" :scroll-top="scrollTop" @scroll="onScroll">
			<rich-text :nodes="htmlContent" selectable></rich-text>
		</scroll-view>
	</view>

	<view>
		<switch class="switch" :checked="autoScroll" @change="toggleAutoScroll">自动刷新</switch>
		<text>{{richLen}}</text>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted,
		onBeforeUnmount,
		nextTick,
		computed
	} from 'vue';
	import {
		saveAs
	} from 'file-saver';
	import TurndownService from 'turndown';

	// 定义数据
	const htmlContent = ref(`
  <div>
    <h1>绿洋在线调试</h1>
    <p>2025/2/6 发布V.10.1</p>
  </div>
`);

	const timer = ref(null); // 用于存储定时器的ID
	const autoScroll = ref(true); // 自动滚动开关状态
	const scrollTop = ref(0); // 用于控制滚动位置
	const data_log = ref(null);
	const richLen = ref(null); //存储富文本长度
	// 定时更新富文本内容
	const startTimer = () => {
		timer.value = setInterval(() => {
			updateContent();
		}, 2000);
	};

	const updateContent = () => {
		// const newContent = `
		//   <div>
		//     <p style="color: #333; margin-top: 10px;">
		//       <strong>新内容</strong>：这是在 ${new Date().toLocaleTimeString()} 添加的内容。
		//     </p>
		//   </div>
		// `;
		// const newContent;
		httpGet();

		// const formattedText = computed(() => {
		// 	// 使用 split 和 join 方法将换行符替换为 <br>
		// 	return data_log.data.split("\n").join("<br>");

		// });
		// const formattedText = data_log.data+"<br>";
		const formattedText = data_log.data;

		htmlContent.value += formattedText;;

		const dat111 = htmlContent.value.length;
		// htmlContent.value += dat111;
		richLen.value = dat111;
		if (dat111 > 50000) {
			downloadAsMarkdown(); //下载内容
			htmlContent.value = '';


		}
		// 如果自动滚动开关处于开启状态，则滚动到底部
		if (autoScroll.value) {
			nextTick(() => {
				scrollToBottom();
			});

		}
	};

	const scrollToBottom = () => {
		// 滚动到底部
		scrollTop.value = 999999; // 设置一个很大的值，确保滚动到底部
	};

	const toggleAutoScroll = (event) => {
		// 切换自动滚动开关状态
		autoScroll.value = event.detail.value;
	};

	const onScroll = (event) => {
		// 监听滚动事件，更新 scrollTop 的值
		scrollTop.value = event.detail.scrollTop;
	};

	const ModlueData = () => {
		console.log("计数");
	};
	// 定义一个响应式变量来存储当前时间
	const currentTime = ref('');

	// 方法：获取当前时间并格式化为字符串
	const getCurrentTime = () => {
		const now = new Date();
		const year = now.getFullYear();
		const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
		const day = String(now.getDate()).padStart(2, '0');
		const hours = String(now.getHours()).padStart(2, '0');
		const minutes = String(now.getMinutes()).padStart(2, '0');
		const seconds = String(now.getSeconds()).padStart(2, '0');

		// 格式化为 "YYYY-MM-DD HH:MM:SS" 的字符串
		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	};

	// 方法：更新当前时间
	const updateTime = () => {
		currentTime.value = getCurrentTime();
	};
	// 下载为Markdown文件
	const downloadAsMarkdown = () => {
		// 创建一个TurndownService实例
		const turndownService = new TurndownService();
		// 将HTML内容转换为Markdown
		const markdownContent = turndownService.turndown(htmlContent.value);
		// 创建一个Blob对象，包含Markdown内容
		const blob = new Blob([markdownContent], {
			type: 'text/markdown'
		});
		// 使用FileSaver.js保存文件
		currentTime.value = getCurrentTime();
		const fileName = "LY_" + currentTime.value;
		saveAs(blob, fileName + '.md');
	};

	const loading = ref(false);
	const error = ref('');

	function httpGet() {
		uni.request({
			url: 'http://ly_fast_charging.local/log', // 替换为你的 API 地址
			method: 'GET',
			header: {
				'Content-Type': 'application/json'
			},
			success: (res) => {

				data_log.data = res.data;
				console.log(res.data);




			},
			fail: (err) => {
				error.value = `请求失败，错误信息: ${err}`; // 处理请求失败
				console.log(error.value);
			},
			complete: () => {
				loading.value = false; // 请求完成，隐藏加载中
			}
		});
	}
	// 生命周期钩子
	onMounted(() => {
		startTimer();
	});

	onBeforeUnmount(() => {
		clearInterval(timer.value);
	});
</script>

<style scoped>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px;
	}

	.fixed-rich-text {
		width: 98%;
		/* 固定宽度 */
		height: 600rpx;
		/* 固定高度 */
		overflow: hidden;
		/* 隐藏滚动条 */
		border: 1px solid #ccc;
		/* 添加边框以便观察 */
		padding: 10px;
		box-sizing: border-box;
	}
</style>